.aside {
  --link-color: var(--color-blue-darkest);
  --link-visited-color: var(--color-blue-darkest);
  --link-rgb-background: var(--rgb-blue-darkest);
  background-color: var(--color-blue-lightest);
  border-radius: 6px;
  color: var(--color-blue-darkest);
  padding: get-size(400);

  > * + * {
    margin-top: get-size(300);
  }

  // This duplicates the above ".aside" for users who just want colors.
  &--default {
    --link-color: var(--color-blue-darkest);
    --link-visited-color: var(--color-blue-darkest);
    --link-rgb-background: var(--rgb-blue-darkest);
    background-color: var(--color-blue-lightest);
    color: var(--color-blue-darkest);
  }

  &--caution {
    --link-color: var(--color-yellow-darkest);
    --link-visited-color: var(--color-yellow-darkest);
    --link-rgb-background: var(--rgb-yellow-darkest);
    background-color: var(--color-yellow-lightest);
    color: var(--color-yellow-darkest);
  }
  
  &--warning {
    --link-color: var(--color-red-darkest);
    --link-visited-color: var(--color-red-darkest);
    --link-rgb-background: var(--rgb-red-darkest);
    background-color: var(--color-red-lightest);
    color: var(--color-red-darkest);
  }
  
  &--success {
    --link-color: var(--color-green-darkest);
    --link-visited-color: var(--color-green-darkest);
    --link-rgb-background: var(--rgb-green-darkest);
    background-color: var(--color-green-lightest);
    color: var(--color-green-darkest);
  }
  
  &--gotchas {
    --link-color: var(--color-purple-darkest);
    --link-visited-color: var(--color-purple-darkest);
    --link-rgb-background: var(--rgb-purple-darkest);
    background-color: var(--color-purple-lightest);
    color: var(--color-purple-darkest);
  }
  
  &--key-term {
    --link-color: var(--color-pink-darkest);
    --link-visited-color: var(--color-pink-darkest);
    --link-rgb-background: var(--rgb-pink-darkest);
    background-color: var(--color-pink-lightest);
    color: var(--color-pink-darkest);
  }
  
  &--codelab {
    --link-color: var(--color-cyan-darkest);
    --link-visited-color: var(--color-cyan-darkest);
    --link-rgb-background: var(--rgb-cyan-darkest);
    background-color: var(--color-cyan-lightest);
    color: var(--color-cyan-darkest);
  }
}


// The .aside__label is added by _transforms/asides.js
.aside__label {
  align-items: center;
  display: flex;

  > svg {
    fill: currentColor;
  }

  > span {
    @extend %type--headline;
    @include apply-utility('weight', 'medium');
    @include font-setup(16px, 28px);
  }

  > * + * {
    margin-left: px-to-rem(12px);
  }
}
